<template>
  <div>
    <!-- 商品列表 -->
      <div class="mui-card" v-for="(item,i) in infolist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <!-- 开关 -->
             <mt-switch
                v-model="$store.getters.getSelected[item.id]" 
                @change="switchChange(item.id,$store.getters.getSelected[item.id])"></mt-switch>
            <!-- 图片 -->
            <img :src="item.thumb_path" alt="">
            <div class="info">
              <h1>{{item.title}}</h1>
              <div class="content">
                <span>¥{{item.sell_price}}</span>
                <numboxc :num="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numboxc>
                <a href="#" @click.prevent='delgoods(item.id,i)'>删除</a>
              </div>
            </div>
					</div>
				</div>
			</div>
    <!-- 总计 -->
    <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
          <div class="count">
            <p>总计 (不含运费)</p>
            <p>已勾选商品<b>{{$store.getters.getSelectedCount}}</b>件, 总价<b>¥{{$store.getters.getSumPrice}}</b></p>
          </div>
          <div class="count_btn">
            <mt-button type="danger">去结算</mt-button>
          </div>
				</div>
			</div>
		</div>

  </div>
</template>

<script>
import numboxc from '../subcomponent/car_numbox.vue'
export default {
  data(){
    return {
      infolist:[]
    }
  },
  methods:{
    // 获取商品列表
    getcarlist(){
      var carId = []
      this.$store.state.car.forEach(item=>carId.push(item.id))

      if(carId.length <= 0) {
        return;
      }

      this.$http.get('api/goods/getshopcarlist/'+carId.join(','))
      .then(result=>{
        if(result.body.status === 0){
            this.infolist = result.body.message;
        }
      })
    },
    // 删除商品
    delgoods(id,i){
      // 列表删除
      this.infolist.splice(i,1)
      // store删除
      this.$store.commit('delgoods',id)

    },
    //开关
    switchChange(id,selected){
      this.$store.commit('switchChange',{
        id:id,
        selected:selected
      })
    }
  },
  created(){
    this.getcarlist()
  },
  components:{
    numboxc
  }
  
}
</script>


<style lang="less" scoped>
.mui-card-content-inner{
  display: flex;
  // 居中对齐弹性盒的各项 <div> 元素：
  align-items: center;
  justify-content: space-between;
  img {
    width: 60px;
    height: 60px;
  }
  .info{
    h1 {
      font-size:13px;
    }
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        color: red;
        font-weight: 700;
      }
    }

  }
}
.count{
  b {
    color: red;
    padding: 5px;
  }
}

</style>
